<template>
  <div>
    <!-- 目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失 -->
    <input type="text" ref="inp" placeholder="这是一个输入框" v-if="show" />
    <!--  autofocus也是聚焦 -->
    <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    btn() {
      this.show = true;
      // this.$refs.myInp.focus()
      // 原因: data变化更新DOM是异步的
      // 输入框还没有挂载到真实DOM上
      // 解决:
      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    },
  },
};
</script>

<style >
div {
  width: 400px;
  height: 300px;
  margin: 100px auto;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>